@extends('linfeng.home.person')
@section('title','修改头像')
@section('first-person')
    <div class="mod-setting-profile">
        <div class="setting-profile-title yahei">头像设置</div>
        <div id="avatar" class="profile-new-portrait">
            <div style="width:760px;margin-left:10px;" class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
                <ul style="height:42px;" id="myTabs" class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" id="home-tab" style="border-top:3px solid #337ab7" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">自定义头像</a></li>
                </ul>
                <div id="myTabContent" style="margin-top:35px;" class="tab-content">
                    {{--自定义头像--}}
                    <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
                        <div style="margin-left:30px;" class="pass-portrait-content pass-portrait-clearfix">
                            <div class="pass-portrait-left">
                                <div class="pass-portrait-tabcontent" id="portraitCustom">
                                    <p class="pass-portrain-commonp">方法一：选择本地照片，上传编辑自己的头像</p>
                                    <div class="pass-portrait-openimg">
                                     <form  name="form0" id="form0" action="" method="post" enctype="multipart/form-data" >
                                        {{--<input style="width:100px;height:30px;" type="button" class="pass-portrait-filebtn" name="openImgBtn" id="openImgBtn" value="选择图片">--}}
                                         <input type="file" class="pass-portrait-filebtn" name="file0" id="file0" multiple="multiple" value="选择图片" />
                                        <span class="pass-portrait-msg">支持jpg、jpeg、gif、png、bmp格式的图片</span>
                                        {{csrf_field()}}

                                        {{--   上次图片预览开始   --}}
                                        <script>
                                            $("#file0").change(function(){
                                                // getObjectURL是自定义的函数，见下面
                                                // this.files[0]代表的是选择的文件资源的第一个，因为上面写了 multiple="multiple" 就表示上传文件可能不止一个
                                                // ，但是这里只读取第一个
                                                var objUrl = getObjectURL(this.files[0]) ;
                                                // 这句代码没什么作用，删掉也可以
                                                // console.log("objUrl = "+objUrl) ;
                                                if (objUrl) {
                                                    // 在这里修改图片的地址属性
                                                    $("#img0").attr("src", objUrl) ;
                                                    $("#img1").attr("src", objUrl) ;
                                                }
                                            })
                                            //建立一個可存取到該file的url
                                            function getObjectURL(file) {
                                                var url = null ;
                                                // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
                                                if (window.createObjectURL!=undefined) { // basic
                                                    url = window.createObjectURL(file) ;
                                                } else if (window.URL!=undefined) { // mozilla(firefox)
                                                    url = window.URL.createObjectURL(file) ;
                                                } else if (window.webkitURL!=undefined) { // webkit or chrome
                                                    url = window.webkitURL.createObjectURL(file) ;
                                                }
                                                return url
                                             }
                                        </script>
                                        {{--   上次图片预览结束   --}}
                                    </div>
                                    <p class="pass-portrain-commonp">方法二：选择推荐头像，快速上传优质头像</p>
                                    <ul class="pass-portrait-recommend pass-portrait-clearfix" id="passPortraitRecommend">
                                        <li id="recom-wildkid-1" class="">
                                            <img src="{{asset('home/image/a1.png')}}">
                                            <span class="recommendSpan"></span>
                                        </li>
                                        <li id="recom-wildkid-2" class="">
                                            <img src="{{asset('home/image/a2.jpg')}}">
                                            <span class="recommendSpan"></span>
                                        </li>
                                        <li id="recom-wildkid-3" class="">
                                            <img src="{{asset('home/image/a3.jpg')}}">
                                            <span class="recommendSpan"></span>
                                        </li>
                                        <li id="recom-wildkid-4" class="">
                                            <img src="{{asset('home/image/a4.jpg')}}">
                                            <span class="recommendSpan"></span>
                                        </li>
                                        <li class="pass-portrait-more" id="passPortraitMore">更多&gt;</li>
                                    </ul>
                                </div>
                                <div class="pass-portrait-save ">
                                    <input type="submit" value="保存头像" style="width:100px;border-radius:3px;height:30px;color:#00AA88;" class="pass-portrait-savebtn pass-portrait-disabled"  id="savePortrait">&nbsp;
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    {{--右侧--}}
                    <div class="pass-portrait-right">
                        <p class="pass-portrain-commonp">头像预览</p>
                        <p id="previewBoxBig" class="pass-portrait-previewboxbig">
                            <img style="width:150px;height:100px;" id="img0" src="{{asset('home/image/a6.jpg')}}" class="pass-portrait-previewbig" ></p>
                        <p class="pass-portrain-commonp pass-portrain-previewp"><span>大头像150*100</span></p>
                        <img style="width:88px;height:55px;" id="img1" src="{{asset('home/image/a6.jpg')}}" class="pass-portrait-previewsmall"></p>
                        <p class="pass-portrain-commonp pass-portrain-previewp"><span>小头像88*55</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
@endsection